<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id ="app">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
    <div>{{msg}}</div>
    <input type="text" v-model="msg">
    <button v-on:click="btnclk">你好v-on</button>
    <button v-on:click="btnclk">你好v@</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>

  <!-- <script src="./vue.js"></script> -->
  <script src="./Observer.js"></script>
  <script src="./vue1.js"></script>
  <script>
    var vm = new Vue1(
      {
        el:"#app",
        data:{
          msg:"mcgee"
        },
        methods: {
          btnclk(){
            console.log(this)
            //通过事件代理把 this.$data.msg 代理到 this.msg
            this.msg = "mcgee_clk"  
          }
        }
      }
    )
  </script>
</body>
</html>

<!-- 
  vue是采用数据劫持+发布者订阅者模式 通过Object.defineProperty来劫持各个属性得setter和getter
  当数据改变时，会发布消息给Dep（订阅器）去通知观察者回调函数更新视图。
  整合Observer类，Compile类，Watcher类，
  通过Oberser监听Model数据变化，回调更新视图
  通过Compile解析编译模板指令
  利用watcher搭起，Observer和Compile通信桥梁，数据得变化影响视图更新，视图变化实现数据更改
-->